<template>
  <!--个人信息-->
  <Card class="card-item">
    <div :style="{textAlign: 'center'}">
      <Badge  type="info" :text="information.tags">
        <Avatar src="http://dd.ddandang.top/blog/images/images.jpg" size="100" />
      </Badge>
    </div>
    <Divider :style="{background: '#3366FF'}" orientation="center" size="small"></Divider>
    <div :style="{textAlign: 'center'}">
      <h2>{{information.name}}</h2>
      <h3>{{information.description}}</h3>
    </div>
    <Row :style="{textAlign: 'center',marginTop: '20px'}" :gutter="16">
      <i-col span="6">
        <Tooltip :content="information.qq" placement="top">
          <Avatar src="http://dd.ddandang.top/blog/images/qq.png" size="30" />
        </Tooltip>
      </i-col>
      <i-col span="6">
        <Tooltip :content="information.github" placement="top">
          <Avatar src="http://dd.ddandang.top/blog/images/github.png" size="30" />
        </Tooltip>
      </i-col>
      <i-col span="6">
        <Tooltip :content="information.gitee" placement="top">
          <Avatar src="http://dd.ddandang.top/blog/images/gitee.png" size="30" />
        </Tooltip>
      </i-col>
      <i-col span="6">
        <Tooltip :content="information.csdn" placement="top">
          <Avatar src="http://dd.ddandang.top/blog/images/csdn.png" size="30" />
        </Tooltip>
      </i-col>
    </Row>
  </Card>
  <!--个人信息-->
</template>

<script>
  import {getInformation} from "@/network/information";

  export default {
    name: "PersonalInfo",
    data() {
      return {
        information: {}
      }
    },
    mounted() {
      this.getInformation();
    },
    methods: {
      getInformation() {
        getInformation().then(res => {
          this.information = res.data.personalInfo;
        })
      }
    }
  }
</script>

<style scoped>
  .tags-item {
    text-align: center;
    margin-top: 15px;
  }
  .tags-item :hover {
    cursor: default;
  }
  .card-item {
    margin-top: 15px;
  }
</style>